<!-- src/components/Login.vue -->
<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-left">
        <div class="welcome-content">
          <h1>欢迎回来</h1>
          <p>请输入您的账号和密码登录系统</p>
          <div class="features">
            <div class="feature-item">
              <el-icon>
                <Check />
              </el-icon>
              <span>安全可靠的认证系统</span>
            </div>
            <div class="feature-item">
              <el-icon>
                <Check />
              </el-icon>
              <span>多因素身份验证</span>
            </div>
            <div class="feature-item">
              <el-icon>
                <Check />
              </el-icon>
              <span>实时安全监控</span>
            </div>
          </div>
        </div>
      </div>

      <div class="login-right">
        <el-card class="login-card" shadow="always">
          <div class="login-header">
            <h2>用户登录</h2>
            <p>请输入您的账户信息</p>
          </div>

          <el-form
            class="login-form"
            :model="loginForm"
            :rules="loginRules"
            ref="loginFormRef"
            @submit.prevent="handleLogin"
            size="large"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                :prefix-icon="User"
                clearable
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                show-password
                clearable
                @keyup.enter="handleLogin"
              />
            </el-form-item>

            <div class="login-options">
              <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码？</el-link>
            </div>

            <el-form-item>
              <el-button
                class="login-button"
                type="primary"
                :loading="loading"
                @click="handleLogin"
              >
                {{ loading ? '登录中...' : '立即登录' }}
              </el-button>
            </el-form-item>
          </el-form>

          <div class="login-footer">
            <el-divider>其他登录方式</el-divider>
            <div class="social-login">
              <el-button circle class="social-btn wechat">
                <el-icon>
                  <ChatDotRound />
                </el-icon>
              </el-button>
              <el-button circle class="social-btn qq">
                <el-icon>
                  <Iphone />
                </el-icon>
              </el-button>
              <el-button circle class="social-btn weibo">
                <el-icon>
                  <Promotion />
                </el-icon>
              </el-button>
            </div>
            <p class="register-tip">
              还没有账号？
              <el-link type="primary" :underline="false" @click="$router.push('/register')">
                立即注册
              </el-link>
            </p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'
import { User, Lock, Check, ChatDotRound, Iphone, Promotion } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

// 获取路由实例
const router = useRouter()

// 定义类型
interface LoginForm {
  username: string
  password: string
  remember: boolean
}

// 响应式数据
const loginFormRef = ref<InstanceType<typeof ElForm>>()
const loading = ref(false)

const loginForm = reactive<LoginForm>({
  username: localStorage.getItem('username') || '', // 自动填充记住的用户名
  password: '',
  remember: false
})

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在 3 到 12 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' }
  ]
}

// 登录处理（✅ 已集成 user_id 和 role_id 获取）
const handleLogin = async (): Promise<void> => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()
    loading.value = true

    // 1️⃣ 第一步：验证账号密码
    const loginRes = await axios.post('/api/login', {
      userName: loginForm.username,
      password: loginForm.password
    })

    const loginData = loginRes.data

    // 检查登录是否成功（根据你后端返回的结构）
    if (loginData.errorCode !== 'OK' || loginData.operationResult !== 'SUCC') {
      const errorMsg = loginData.errorMsg || '用户名或密码错误'
      ElMessage.error(errorMsg)
      return
    }

    // 2️⃣ 第二步：通过用户名查询用户信息（获取 user_id）
    let userId: number | null = null
    try {
      const userRes = await axios.get('/api/users', {
        params: { username: loginForm.username }
      })

      // 假设返回格式：{ data: [ { id: 11, ... } ] }
      const users = userRes.data?.data || []
      if (!Array.isArray(users) || users.length === 0) {
        throw new Error('未找到用户')
      }
      userId = users[0].id
      if (typeof userId !== 'number') {
        throw new Error('user_id 格式无效')
      }
    } catch (e) {
      console.error('查询用户信息失败:', e)
      ElMessage.error('无法获取用户信息，请稍后重试')
      return
    }

 // 3️⃣ 第三步：通过 user_id 查询角色（获取 role_id）
// 3️⃣ 第三步：通过 user_id 查询角色（获取 role_id）
let roleId: number | null = null
let roleName = '未知角色'

try {
  const roleRes = await axios.get(`/api/user_roles/${userId}`)
  const roleList = roleRes.data // 这是一个数组

  // 检查是否为空数组或 null
  if (!Array.isArray(roleList) || roleList.length === 0) {
    console.error('未查询到用户角色:', roleList)
    ElMessage.error('用户角色信息异常，请联系管理员')
    return
  }

  const roleData = roleList[0] // 取第一个角色

  // 检查角色数据结构
  if (!roleData || typeof roleData.id !== 'number') {
    console.error('角色数据格式异常:', roleData)
    ElMessage.error('用户角色信息异常，请联系管理员')
    return
  }

  // ✅ 正确赋值
  roleId = roleData.id

  // 映射中文角色名
  const roleMap: Record<number, string> = {
    1: '管理员',
    2: 'VIP会员',
    3: '普通用户'
  }
  roleName = roleMap[roleId] || '未知角色'

} catch (e) {
  console.error('查询用户角色失败:', e)
  ElMessage.error('无法获取用户角色，请联系管理员')
  return
}
// ✅ 新增：第四步 —— 通过 user_id 获取用户详情，获取 isActive
let isActive = false;
try {
  const userDetailRes = await axios.get(`/api/users/${userId}`);
  const userDetail = userDetailRes.data;

  if (userDetail.operationResult !== 'SUCC' || userDetail.errorCode !== 'OK') {
    console.warn('获取用户详情失败:', userDetail);
    throw new Error(userDetail.errorMsg || 'Unknown error');
  }

  const userData = userDetail.data;
  if (userData && typeof userData.isActive === 'boolean') {
    isActive = userData.isActive;
  } else {
    console.warn('用户状态字段格式异常，视为非活跃:', userData);
    isActive = false; // 明确设为 false，确保安全
  }
} catch (e) {
  console.warn('未能获取用户 isactive 状态，视为非活跃:', e);
  isActive = false;
}

// 🔒 关键：禁止非活跃用户登录
if (!isActive) {
  ElMessage.error('您的账户已被禁用，请联系管理员');
  return; // ⛔ 中断后续流程，不保存、不跳转
}


// 4️⃣ 第五步：保存到 localStorage（原第四步，现在改为第五步）
const currentUser = {
  user_id: userId,
  username: loginForm.username,
  role_id: roleId,
  role_name: roleName,
// ✅ 新增字段
}

localStorage.setItem('currentUser', JSON.stringify(currentUser))

    // 5️⃣ 第五步：记住用户名（可选）
    if (loginForm.remember) {
      localStorage.setItem('username', loginForm.username)
    } else {
      localStorage.removeItem('username')
    }

    ElMessage.success('登录成功！')
    router.push('/Users')
  } catch (error: any) {
    // 处理网络或请求异常
    if (error.response) {
      const status = error.response.status
      if (status === 401 || status === 400) {
        ElMessage.error('用户名或密码错误')
      } else if (status === 404) {
        ElMessage.error('接口未找到，请联系管理员')
      } else if (status === 500) {
        ElMessage.error('服务器内部错误')
      } else {
        ElMessage.error(`请求失败：${status}`)
      }
    } else if (error.request) {
      ElMessage.error('网络连接失败，请检查网络')
    } else {
      ElMessage.error('请求异常：' + error.message)
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.login-wrapper {
  display: flex;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  min-height: 600px;
}

.login-left {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  align-items: center;
}

.welcome-content h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.welcome-content p {
  font-size: 1.1rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}

.feature-item .el-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 4px;
}

.login-right {
  flex: 1;
  padding: 40px;
  display: flex;
  align-items: center;
}

.login-card {
  border: none;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header h2 {
  color: #303133;
  font-size: 1.8rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-header p {
  color: #909399;
  font-size: 0.9rem;
}

.login-form {
  margin-bottom: 20px;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 1.1rem;
  border-radius: 8px;
}

.login-footer {
  text-align: center;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
}

.social-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #dcdfe6;
  background: white;
}

.social-btn.wechat:hover {
  border-color: #07c160;
  color: #07c160;
}

.social-btn.qq:hover {
  border-color: #12b7f5;
  color: #12b7f5;
}

.social-btn.weibo:hover {
  border-color: #e6162d;
  color: #e6162d;
}

.register-tip {
  color: #909399;
  font-size: 0.9rem;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    margin: 20px;
  }

  .login-left {
    padding: 40px 20px;
  }

  .login-right {
    padding: 30px 20px;
  }

  .welcome-content h1 {
    font-size: 2rem;
  }
}
</style>